<template>
  <div class="app-container">
    <div class="flex cursor">
      <div class="flex cursor">
        <div class="custom-title margin-right-lg " :class="tag==1?'active':''" @click="bindChangeTag(1)">节假日减免费量统计表</div>
        <!-- <div class="custom-title" :class="tag==2?'active':''" @click="bindChangeTag(2)">节假日减免费量对比表</div> -->
      </div>
    </div>
    <!-- <div class="flex">
      <div class="label">内容：</div>
      <div class="custom-tag">
        <el-radio-group v-model="radioCon" size="large">
          <el-radio-button :label="item.label" :value="item.label" v-for="(item,index) in holiday_type" :key="index" @click="bindRadio(item.value)" />
        </el-radio-group>
      </div>
    </div> -->
 
    <div v-if="tag==1">
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#E0EAFB!important'}" :row-class-name="tableRowClassName"
        :span-method="objectSpanMethod" border>
        <el-table-column prop="deptName" label="收费站" width="180" />
        <el-table-column prop="year" label="年度" />
        <el-table-column prop="holiday" label="日期" width="180" />
        <el-table-column prop="enTraffic" label="入口免费车通行量" width="180" />

        <el-table-column prop="exTraffic" label="减免通行量" width="180" />
        <el-table-column prop="reduceFee" label="减免通行费" />
        <el-table-column prop="d" label="操作" >
        <template  #default="scope">
          <el-button size="small" link type="primary"  @click="openListenerForm(scope.row, scope.$index)">上报</el-button>         
        </template>
        </el-table-column>
      </el-table>

    </div>
    <div v-if="tag==2">
      <el-table :data="tableDataCar" style="width: 100%" :header-cell-style="{ 'text-align': 'center '}">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="a" label="日期" width="180" />
        <el-table-column prop="a" label="路段" width="180" />
        <el-table-column prop="a" label="收费站" width="180" />
        <el-table-column prop="a" label="入口免费车（辆）" width="180">
          <el-table-column label="2024年" prop="element.prop" />
          <el-table-column label="2023年" prop="element.prop" />
          <el-table-column label="同比（%）" prop="element.prop" />
        </el-table-column>
        <el-table-column prop="a" label="出口免费车（辆）" width="180">
          <el-table-column label="2024年" prop="element.prop" />
          <el-table-column label="2023年" prop="element.prop" />
          <el-table-column label="同比（%）" prop="element.prop" />
        </el-table-column>
        <el-table-column prop="a" label="减免通行费（员）" width="180">
          <el-table-column label="2024年" prop="element.prop" />
          <el-table-column label="2023年" prop="element.prop" />
          <el-table-column label="同比（%）" prop="element.prop" />
        </el-table-column>

      </el-table>
    </div>


    <el-dialog title="节假日统计表上报" v-model="open" width="1000px" append-to-body>
          <el-form ref="activityRef" :model="form" :rules="rules" label-width="130px">
            <el-row :gutter="15">
              <el-col :span="12">
                <el-form-item label="收费站" prop="deptName">
                  <el-input v-model="form.deptName" placeholder="请输入收费站" style="width:100%" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="年度" prop="year">
                  <el-input v-model="form.year" placeholder="请输入年度" style="width:100%" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="日期" prop="holiday">
                  <el-input v-model="form.holiday" placeholder="请输入日期" style="width:100%" :disabled="true" />
                </el-form-item>
              </el-col>
            

              <el-col :span="12">
                <el-form-item style="width:100%" label="入口免费车通行量" prop="enTraffic">
                  <el-input v-model="form.enTraffic" placeholder="请输入入口免费车通行量" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item style="width:100%" label="减免通行量" prop="exTraffic">
                  <el-input v-model="form.exTraffic" placeholder="请输入减免通行量" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item style="width:100%" label="减免通行费" prop="reduceFee">
                  <el-input v-model="form.reduceFee" placeholder="请输入减免通行费" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </template>
        </el-dialog>
  </div>
</template>

<script setup>
import moment from 'moment'
import { statementList,statementEdit,getStatementDate } from "@/api/charge/ticket";
import useUserStore from '@/store/modules/user'

const route = useRoute();
const { proxy } = getCurrentInstance()
const userStore = useUserStore()
const { holiday_type } = proxy.useDict('holiday_type');
const queryParams=ref({deptId:'',year:moment().format('YYYY'),holidayType:1})
const tableData = ref()
const radioCon = ref(1)
const deptId=ref()
const tableDataCar = ref([])
const tag = ref(1)
const open=ref(false)
const form=ref({})


if(route.query){
  queryParams.value.holidayType=route.query.type
}
const getDate=()=>{
  // getStatementDate().then(res=>{
    
  // })
}

const bindRadio=(val)=>{
  queryParams.value.holidayType=val
  getList()
}

const bindChangeTag = (val) => {
  tag.value = val;
 
}
const openListenerForm=(item,index)=>{
  open.value=true;
  form.value=item;

}

const getList = () => {
  statementList(queryParams.value).then(res => {
    if (res.code == 200) {
      tableData.value=res.data
    }

  })
}
const handleAddDay=()=>{
  // console.log(111)

}
const submitForm=()=>{
  proxy.$refs["activityRef"].validate(valid => {
    if (valid) {
      statementEdit(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
    }
  });
}
const cancel=()=>{
  open.value=false;
}
const getDeptId = () => {
  userStore.getInfo().then(res => {
    if (res.code == 200) {
      deptId.value = res.user.dept.deptId;
      // deptName.value = res.user.dept.deptName;
      // userId.value = res.user.userId;
      // userName.value = res.user.userName;
      queryParams.value.deptId=deptId.value 
      getList()
    }

  })
}
getDeptId()
getDate()
</script>

<style scoped>
.flex {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.flex .label {
  color: #333;
  font-size: 14px;
}
/deep/.padding .el-radio-button--large .el-radio-button__inner {
  padding: 8px 19px;
}
/deep/ .custom-tag .el-radio-button--large .el-radio-button__inner {
  min-width: 60px;
  height: 32px;
  line-height: 32px;
  margin: 0 4px 0;
  padding: 0 10px;
  border: 1px solid #e4e4e4;
  font-size: 14px;
}
/deep/ .custom-tag .el-radio-button--large.is-active .el-radio-button__inner {
  background: #fff;
  border: 1px solid #246bcc;
  color: #246bcc;
  position: relative;
}

/deep/
  .custom-tag
  .el-radio-button--large.is-active
  .el-radio-button__inner:after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  border-top: 20px solid #246bcc;
  border-left: 20px solid transparent;
}
/deep/
  .custom-tag
  .el-radio-button--large.is-active
  .el-radio-button__inner:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 6px;
  background: transparent;
  top: 2px;
  right: 4px;
  border: 1px solid white;
  border-top: none;
  border-right: none;
  transform: rotate(-55deg);
  z-index: 9;
}

.margin-right {
  margin-right: 8px;
}

/deep/ .input-height .el-input__wrapper {
  height: 32px;
}
/deep/ .input-height .el-date-editor.el-input {
  height: 32px;
}
.margin-right-lg {
  margin-right: 32px;
}
.cursor {
  cursor: pointer;
}
.flex-end {
  margin-left: auto;
}
.active {
  position: relative;
}
.active::before {
  content: "";
  display: block;
  width: 50px;
  height: 2px;
  border-radius: 2px;
  background: var(--el-color-primary);
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
}

/deep/ .el-table .warning-row {
  background: #e0eafb !important;
  text-align: center;
}
/deep/ .el-table .success-row {
  background: #ffeed9 !important;
  text-align: center;
}
/deep/ .el-table .info-row {
  background: #eaeaea !important;
  text-align: center;
}

.text-red {
  color: red;
}

.scroll {
  height: 800px;
  overflow-y: scroll;
}
.align-center {
  display: flex;
  align-items: center;
}
</style>